import { Text, StyleSheet, View, Image, SafeAreaView, ScrollView, Dimensions, TouchableWithoutFeedback, TouchableOpacity } from 'react-native'
import React, { useRef, useState } from 'react'
import { connect } from 'react-redux'
import { IconOutline } from "@ant-design/icons-react-native";
import { formatAddress } from "../../utils/format"
import { pTx } from '../../utils/dimensions'
import { bigNumberFormatUnits } from 'react-native-web3-wallet';
import { toStringMatch } from '../../utils/format';
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import AddModalWallet from "../../components/addModalWallet"


const WalletNetworkList = (props) => {
    const { NetworkList, navigation } = props
    const realm = useRealm();
    const addModalWalletRefs = useRef()
    const walletList = useQuery(schemaName.Wallet)
    const wallet = useQuery(schemaName.Wallet, wallet => {
        return wallet.filtered('current = true');
    })[0];
    const [currentNetwork, setCurrentNetwork] = useState(wallet.chainId)
    const setwallet = (item) => {
        navigation.goBack()
        realm.write(() => {
            for (const wallet of walletList) {
                if (item._id + "" == wallet._id + "") {
                    wallet.current = true
                } else {
                    wallet.current = false
                }
            }
        });
    }
    return (
        <>
            <View style={styles.centeredView}>
                <SafeAreaView style={styles.list}>
                    <ScrollView style={styles.leftRow}>
                        {NetworkList.map((item, index) => {
                            return (
                                <TouchableWithoutFeedback key={index} onPress={() => setCurrentNetwork(item.chainId)}>
                                    <View style={[styles.iconCell, currentNetwork == item.chainId ? styles.backIconCell : ""]}>
                                        <Image style={[styles.iconLogo]} source={item.rpcPrefs.imageSource}></Image>
                                    </View>
                                </TouchableWithoutFeedback>
                            )
                        })}
                    </ScrollView>
                    <View style={styles.rightRow}>
                        <View style={[styles.rightRowTitle, styles.flexDirectionRow]}>
                            <Text style={styles.RowTitle}>{NetworkList.find(item => item.chainId == currentNetwork)?.nickname}</Text>
                            <IconOutline style={[styles.icon, { fontSize: pTx(20) }]} name="plus-circle" onPress={() => addModalWalletRefs.current.show(currentNetwork)} />
                        </View>
                        <ScrollView>
                            {
                                walletList.map((item, index) => {
                                    return (
                                        <View key={index}>
                                            {item.chainId == currentNetwork ?
                                                <TouchableWithoutFeedback onPress={() => setwallet(item)}>
                                                    <View style={[styles.cell]}>
                                                        <View style={styles.cel}>
                                                            <Text style={styles.name}>{item.name}</Text>
                                                            <View style={[styles.flexDirectionRow, { marginTop: pTx(5) }]}>
                                                                <Text style={styles.address}>{formatAddress(item.address)}</Text>
                                                                <IconOutline style={[styles.minicon]} name="copy" />
                                                            </View>
                                                        </View>
                                                        {
                                                            item._id + "" == wallet._id + "" && <IconOutline name="check" style={[styles.icon, { color: "rgba(237, 184, 26, 1)", marginTop: pTx(15) }]} />
                                                        }
                                                        <Text style={styles.vlaue}>{toStringMatch(bigNumberFormatUnits(item.balance))} {item.symbol} </Text>
                                                    </View>
                                                </TouchableWithoutFeedback>
                                                : ""}
                                        </View>
                                    )
                                })
                            }
                            {walletList.filter(item => item.chainId == currentNetwork).length == 0 ?
                                <TouchableOpacity onPress={() => addModalWalletRefs.current.show(currentNetwork)} style={styles.addWallet}>
                                    <Text style={styles.stylesText}>添加钱包</Text>
                                </TouchableOpacity> : ""}
                        </ScrollView>
                    </View>
                </SafeAreaView>
                <AddModalWallet ref={addModalWalletRefs} {...props} />
            </View>
        </>
    )
}


const mapState = state => state.wallet


export default connect(mapState, {})(WalletNetworkList)

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderTopRightRadius: pTx(15),
        borderTopLeftRadius: pTx(15),
    },
    headTtle: {
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
    },
    flexDirectionRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    icon: {
        fontSize: pTx(16),
    },
    iconImage: {
        width: pTx(18),
        height: pTx(18),
    },
    backIconCell: {
        backgroundColor: "#FFF"
    },
    title: {
        fontSize: pTx(18),
        color: "#0A0C14"
    },
    list: {
        backgroundColor: "#fff",
        flex: 1,
        height: Dimensions.get('screen').height - pTx(200),
        flexDirection: "row",
    },
    leftRow: {
        flexBasis: pTx(70),
        flexShrink: 0,
        flexGrow: 0,
        backgroundColor: "rgba(237, 237, 237, 1)",
    },
    iconCell: {
        height: pTx(70),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    iconLogo: {
        width: pTx(32),
        height: pTx(32),
        borderRadius: pTx(32),
    },
    rightRow: {
        flexBasis: "auto",
        flexShrink: 1,
        flexGrow: 1,
        paddingHorizontal: pTx(15),
    },
    rightRowTitle: {
        height: pTx(50),
    },
    RowTitle: {
        fontSize: pTx(16),
        color: "#0A0C14",
    },
    cell: {
        marginBottom: pTx(8),
        position: "relative",
        flexDirection: 'row',
        justifyContent: "space-between",
        height: pTx(100),
        backgroundColor: "#000",
        borderRadius: pTx(6),
        paddingHorizontal: pTx(12),
        paddingVertical: pTx(12),
    },
    name: {
        fontSize: pTx(15),
        color: "rgba(237, 184, 26, 1)",
        fontWeight: "500",
    },
    address: {
        fontSize: pTx(12),
        color: "rgba(237, 184, 26, 0.5)",
    },
    minicon: {
        marginLeft: pTx(12),
        fontSize: pTx(8),
        color: "rgba(237, 184, 26, 0.5)",
    },
    vlaue: {
        position: "absolute",
        right: 0,
        bottom: 0,
        paddingBottom: pTx(12),
        paddingRight: pTx(12),
        fontSize: pTx(14),
        fontWeight: "400",
        color: "rgba(237, 184, 26, 1)",
    },
    addWallet: {
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        color: "#eeeeee",
        paddingVertical: pTx(25),
        borderRadius: pTx(6),
        borderWidth: 2,
        borderColor: "#eeeeee",
        borderStyle: "dashed",
    }
})